<template name="placeAndSearch">
	<view class="topBox">
		<view class="place f16" v-show="showPlace" @tap="getlocationFn()">
			<icon class="iconfont iconweizhi1" type=""></icon>
			{{address || '点此获取位置'}}
		</view>
		<view class="search f16" :class="[showPlace?'':'showPlace']">
			<icon class="iconfont iconfangdajing" type="" @tap="jumpseach()"></icon>
			<input type="text" v-model="value" class="f16" placeholder="搜索小服务" />
		</view>
		<view v-show="!showPlace" class="cancel" @tap="backpage()">
			取消
		</view>
	</view>
</template>

<script>
	import QQMapWX from '@/static/js/map/qqmap-wx-jssdk.js';
	export default {
		name: "placeAndSearch",
		props: {
			showPlace:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				value:"",
				address:""
			}
		},
		mounted(){
			this.getlocationFn();
		},
		onLoad() {
		},
		methods: {
			jumpseach(){
				console.log('?')
				uni.navigateTo({
					url:'../../pages/seachPage/seachpage?key='+this.value
				})
			},
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			getlocationFn(){
				let that = this
				let qqmapsdk = new QQMapWX({
				    key: that.QQMAPKEY
				});
				wx.getLocation({
				      type: 'wgs84',
				      success: function (res) {
						 // console.log('???res',res)
				        var sss = {};
				        //3、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
				        qqmapsdk.reverseGeocoder({
				          location: {
				            latitude: res.latitude,
				            longitude: res.longitude
				          },
				          success: function (addressRes) {
				           // console.log('当前位置', addressRes);
							let add = addressRes.result.address_component
						   that.address = add.city + add.district
				          },
				          fail: function (res) {
							 // console.log('当前位置结束', res);
				          }
				        });
				      },
				      fail: function (info) {
						uni.showToast({
							  title: '网络错误请从新获取位置',
							  icon: 'none'
						})
				      }
				    })
			}
		}
	}
</script>

<style lang="less">
	@import '@/common/common.less';
		.topBox {
			border-radius: 30rpx;
			height: 125rpx;
			width: 95%;
			margin: 0 auto;
			background-color: @primary-color;
			display: flex;
			align-items: center;
			justify-content: space-between;
			vertical-align: middle;
			margin-bottom: 13rpx;
			.place {
				color: #ffffff;
				margin-left: 30rpx;
				font-weight: bold;
				.iconfont {
					margin-right: 20rpx;
				}
			}

			.search {
				background: #fff;
				display: flex;
				height: 75rpx;
				align-items: center;
				text-align: center;
				border-radius: 30rpx;
				margin-right: 10px;
				padding-left: 10px;
				width: 345rpx;
				.iconfont {
					width: 50rpx;
					color: #cccccc;
					font-size: 18px;
				}
			}
			.showPlace{
				width: 520rpx;
				margin-left: 42rpx;
			}
			.cancel{
				color: #FFFFFF;
				margin-right: 37rpx;
			}
		}
</style>
